<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath(); 
	
	//Ajax : 비동기방식 ,  데이터 전달후 데이터의 도착여부를 신경안씀
	//헤더부분이 없어서 데이터 전송속도가 빠르다
	//웹에서 전체가 아닌 필요부분만 수정할때 사용
	//아이디 중복검사, 자동완성기능
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=cp%>/data/js/ajaxUtil.js"></script>
<script type="text/javascript">
	
	function sendIt(){
		
		//XMLHttpRequest 객체 생성
		xmlHttp = createXMLHttpRequest();
		
		var query = "";
		var su1 = document.getElementById("su1").value;
		var oper = document.getElementById("oper").value;
		var su2 = document.getElementById("su2").value;
		
		//GET방식 데이터 전송
		query = "result.jsp?su1=" +su1+ "&su2=" +su2+ "&oper=" +oper;
		
		//onreadystatechange라는 프로퍼티는
		//서버가 일을 끝내고 클라이언트에게 정보를 되돌릴때
		//자동으로 실행되는 메소드를 지정
		xmlHttp.onreadystatechange = callback;
		
		xmlHttp.open("GET", query, true); //true는 비동기 방식
		xmlHttp.send(null);
		
	}
	
	function callback(){
		
		//서버에서 정상적으로 응답을 받아왔을때 의 고유 번호 : 4
		if(xmlHttp.readyState == 4){
			
			if(xmlHttp.status == 200) //404, 500같은 에러가 발생하지 않을때 : 200
				printData();
		}
	}
	
	function printData(){
		
		var result = xmlHttp.responseXML.getElementsByTagName("root")[0];
		var out = document.getElementById("results");
		
		out.innerHTML = ""; //html문장을 삽입 제거시 사용
		out.style.display ="";
		
		var value = result.firstChild.nodeValue; //xml파싱 문장
		out.innerHTML = value;
	}
</script>
</head>
<body>

<input type="text" id="su1"/>
<select id="oper">
	<option value="hap">더하기</option>
	<option value="sub">빼기</option>
	<option value="mul">곱하기</option>
	<option value="div">나누기</option>
</select>
<input type="text" id="su2"/>
<input type="button" value="=" onclick="sendIt();"/><br/>

<div id="results" style="display:none;"></div>

</body>
</html>